<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/tentime">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
</head>
<body>
<div class="layui-form tentime-compile">
    <form id="inputForm" th:object="${entity}" class="layui-form">
        <input id="id" type="hidden" name="id" th:if="${entity}" th:value="${entity.id}"/>
        <div class="layui-form-item">
        	<div class="layui-inline">
	            <label class="layui-form-label required">父级菜单</label>
	            <div class="layui-input-inline">
	                <input class="layui-input select-tree" lay-verify="required" th:attr="data-url=@{/system/menu/list}, data-value=${pMenu?.id}" type="text" name="pid"  placeholder="请输入父级菜单" th:value="${pMenu?.title}">
	            </div>
            </div>
	        <div class="layui-inline">
	            <label class="layui-form-label required">菜单类型</label>
	            <div class="layui-input-inline">
	                <select name="type" mo:dict="MENU_TYPE" mo-selected="${entity?.type}" mo-empty="" lay-verify="type|required"></select>
	            </div>
	        </div>
        </div>
        <div class="layui-form-item">
        	<div class="layui-inline">
	            <label class="layui-form-label required">菜单名称</label>
	            <div class="layui-input-inline">
	                <input class="layui-input" lay-verify="required" type="text" name="title" placeholder="请输入标题" th:value="${entity?.title}">
	            </div>
            </div>
            <div class="layui-inline">
	            <label class="layui-form-label required">菜单编码</label>
	            <div class="layui-input-inline">
	                <input class="layui-input" lay-verify="required" type="text" id="code" name="code" placeholder="请输入编码" th:value="${entity?.code}">
	            </div>
            </div>
        </div>
        <div class="layui-form-item">
        	<div class="layui-inline">
	        	<label class="layui-form-label required">URL地址</label>
	            <div class="layui-input-inline">
	                <input class="layui-input url-input" lay-verify="required" type="text" name="url"  placeholder="请输入URL地址" th:value="${entity?.url}">
	            </div>
            </div>
            <div class="layui-inline">
	            <label class="layui-form-label">排序(之后)</label>
	            <div class="layui-input-inline">
	                <select class="select-sort" name="sort" th:attr="data-url=@{/system/menu/sortList}, data-id=${entity?.id}, data-sort=${entity?.sort}" lay-verify="sort"></select>
	            </div>
	        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-inline">
                <input class="layui-input perms-input" type="text" name="perms"  placeholder="请输入权限标识" th:value="${entity?.perms}">
            </div>
            <button class="layui-btn layui-btn-primary layui-btn-sm perms-refresh">
                <i class="fa fa-refresh"> 重置</i>
            </button>
        </div>
        <div class="layui-form-item">
          	<label class="layui-form-label">菜单图标</label>
            <div class="layui-input-inline">
                <input id="iconId" class="layui-input" type="text" name="icon" placeholder="请输入菜单图标" th:value="${entity?.icon}">
            </div>
	        <button id="selectIcon" class="layui-btn layui-btn-primary layui-btn-sm" type="button"><i class="fa fa-plus"> 选择</i></button>
            <i id="iconShow" th:class="'icon-show '+${entity?.icon}"></i>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark" style="width:450px;">[[${entity?.remark}]]</textarea>
            </div>
        </div>
        <div class="layui-form-item tentime-finally">
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-submit lay-filter="submit_button" shiro:hasAnyPermissions="system:menu:add,system:menu:edit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="closeWin();" type="button"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: common"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
<script type="text/javascript" th:src="@{/js/tentimeTree.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var pid = '';
    layui.use(['form','layer'], function () {
        window.form = layui.form;
        layer = layui.layer;
        // 初始化排序下拉选项
        pid = $(".select-tree").data('value');
        if (pid !== undefined){
            sortRender({id: pid});
        }
        form.on("submit(submit_button)", function (data) {
	        $("#inputForm").ajaxSubmit({
				type : "post"
	            ,url : ctx + '/system/menu/saveEntity'
	            ,success : function(data) {
	            	var code = data.code;
	            	if (code == 200) {
	            		parent.layer.msg('数据保存成功!', {icon: 1});
	            		closeWin();
	            		window.parent.expandById(pid);
	            		//window.parent.location.reload();
	            	} else {
	            		parent.layer.msg('数据验证失败!', {icon: 2});
	            	}
	            }
			});
       		return false;
       	});
    });

    // 初始化下拉树
    $.fn.selectTree({
        rootTree: '顶级',
        // 选中后事件
        onSelected: sortRender
    });

    // 更新渲染排序下拉选项
    function sortRender(treeNode) {
        pid = treeNode.id;
        var sort = $(".select-sort");
        var id = sort.data('id') ? sort.data('id') : 0;
        var url = sort.data('url') + "/" + pid + "/" + id;
        $.get(url, function (result) {
            var options = '';
            var sortNum = Object.keys(result).length;
            if(pid === $(".select-tree").data('value') && sort.data('sort')){
                sortNum = sort.data('sort') - 1;
            }
            result[0] = "首位";
            for(var key in result){
                var selected = sortNum == key ? "selected=''" : "";
                options += "<option value='"+ key +"' " + selected + ">"+ result[key] +"</option>";
            }
            sort.html(options);
            form.render('select');
        });
        // 设置默认的code
        var id = $('#id').val();
        if (id === '') {//新增的状态再设置
	        var url_code = ctx + '/system/menu/getCode/' + pid;
	        $.get(url_code, function (result) {
	        	$('#code').val(result);
	        });
        }
    }
    // 监听变动图标
    $(".icon-input").on("input propertychange", function(){
        $(".icon-show").attr("class", "icon-show " + $(this).val());
    });
    // 同步操作权限输入框
    var $perms = $(".perms-input").val();
    $(".url-input").on("input propertychange", function(){
        if($perms === ''){
            $(".perms-refresh").click();
        }
    });
    // 更新权限标识
    $(".perms-refresh").on("click", function (e) {
        e.preventDefault();
        var $perms = $(".perms-input");
        var url = $(".url-input").val().substr(1);
        var perms = url.replace(new RegExp( '/' , "g" ), ':');
        $perms.val(perms);
    });
    
    $("#selectIcon").on("click", function (e) {
        e.preventDefault();
        showTopWin('选择图标', 1024,600,  ctx + "/common/iconselect");
    });
    
	function showTopWin(title, width, height, url/*, reload, dataGrid*/) {
		if (!isNaN(width)) width = width + "px";
		if (!isNaN(height)) height = height + "px";
		parent.layer.open({
       	  type: 2 //此处以iframe举例
       	  ,title: title
       	  ,area: [width, height] //宽高自适应
       	  ,shade: 0.3
       	  ,maxmin: true
       	  ,content: url
       	  ,btn: ['确定', '清除','关闭']
		  ,yes: function (index, layero) {
			  //var datas = layero.find("iframe")[0].contentWindow.selectData();
              // 带parent时必须要这样
              //var iframeWin = parent.window[layero.find('iframe')[0]['name']];
              var datas = parent.window["layui-layer-iframe" + index].selectData();
			  if (datas.length == 0) {
				  parent.layer.msg('请选择菜单!', {icon : 2});
				  return false;
			  } else {
				  $('#iconId').val(datas[0]);
				  $('#iconShow').attr("class", "icon-show "+ datas[0]);
				  parent.layer.close(index);
			  } 
		  }
		  ,btn2: function(index, layero){
			  $('#iconId').val("");
			  return false;
		  }
       	  /* ,end: function () {//窗口关闭后执行的方法
           	 if (reload != '' && reload != null && reload) location.reload();
           	 if (dataGrid != '' && dataGrid != null) $('#' + dataGrid).trigger('reloadGrid');
          } */
       	});
	}
    
</script>
</body>
</html>